<template>
    <div class="statistical-indicator-config">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="统计指标配置" name="statistics">
                <el-card>
                    <!-- 添加指标按钮 -->
                    <el-row :gutter="20" style="margin-bottom: 20px;">
                        <el-col :span="24">
                            <div class="title">
                                <h3>统计指标配置</h3>
                                <el-button type="primary" @click="handleAddIndicator">添加指标</el-button>
                            </div>
                        </el-col>
                    </el-row>

                    <!-- 指标列表 -->
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-table :data="indicatorData" stripe style="width: 100%">
                                <el-table-column prop="name" label="指标名称"></el-table-column>
                                <el-table-column prop="range" label="数据范围"></el-table-column>
                                <el-table-column label="操作">
                                    <template #default="scope">
                                        <el-button type="text" size="small"
                                            @click="handleEditIndicator(scope.row)">编辑</el-button>
                                        <el-button type="text" size="small" style="color: red;"
                                            @click="handleDeleteIndicator(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>

                    <!-- 操作记录 -->
                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="24">
                            <h3>操作记录</h3>
                            <el-table :data="operationRecords" stripe style="width: 100%">
                                <el-table-column prop="time" label="操作时间"></el-table-column>
                                <el-table-column prop="type" label="操作类型"></el-table-column>
                                <el-table-column prop="operator" label="操作人员"></el-table-column>
                                <el-table-column prop="content" label="操作内容"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="管网合格率配置" name="qualified">
                <el-card>
                    <h3>
                        管网合格率配置
                    </h3>
                    <div class="title">
                        <el-input v-model="input" style="width: 100%;margin-right: 10px;" placeholder="Please input" />
                        <el-button type="primary" @click="handleAddIndicator">保存设置</el-button>
                    </div>
                    <!-- 操作记录 -->
                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="24">
                            <h3>操作记录</h3>
                            <el-table :data="operationRecords" stripe style="width: 100%">
                                <el-table-column prop="time" label="操作时间"></el-table-column>
                                <el-table-column prop="type" label="操作类型"></el-table-column>
                                <el-table-column prop="operator" label="操作人员"></el-table-column>
                                <el-table-column prop="content" label="操作内容"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="压力专题分时报警配置" name="pressure">
                <el-card>
                    <!-- 添加指标按钮 -->
                    <el-row :gutter="20" style="margin-bottom: 20px;">
                        <el-col :span="24">
                            <div class="title">
                                <h3>压力专题分时报警配置</h3>
                                <el-button type="primary" @click="handleAddIndicator">添加指标</el-button>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 指标列表 -->
                    <el-row :gutter="20">
                        <el-col :span="24">

                            <el-table :data="indicatorData" stripe style="width: 100%">
                                <el-table-column prop="name" label="指标名称"></el-table-column>
                                <el-table-column prop="range" label="数据范围"></el-table-column>
                                <el-table-column label="操作">
                                    <template #default="scope">
                                        <el-button type="text" size="small"
                                            @click="handleEditIndicator(scope.row)">编辑</el-button>
                                        <el-button type="text" size="small" style="color: red;"
                                            @click="handleDeleteIndicator(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>

                    <!-- 操作记录 -->
                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="24">
                            <h3>操作记录</h3>
                            <el-table :data="operationRecords" stripe style="width: 100%">
                                <el-table-column prop="time" label="操作时间"></el-table-column>
                                <el-table-column prop="type" label="操作类型"></el-table-column>
                                <el-table-column prop="operator" label="操作人员"></el-table-column>
                                <el-table-column prop="content" label="操作内容"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="阶梯电价配置" name="electricity">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card>
                            <div class="price-tier">
                                <div class="title">
                                    <h4>第1档</h4>
                                    <el-button type="primary" @click="handleEdit('1')">编辑</el-button>
                                </div>
                                <p>用电量区间：0-100度</p>
                                <p>电价：¥0.5/度</p>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card>
                            <div class="price-tier">
                                <div class="title">
                                    <h4>第2档</h4>
                                    <el-button type="primary" @click="handleEdit('1')">编辑</el-button>
                                </div>
                                <p>用电量区间：101-200度</p>
                                <p>电价：¥0.8/度</p>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card style="margin-top: 20px;">
                    <!-- 操作记录 -->
                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="24">
                            <h3>操作记录</h3>
                            <el-table :data="operationRecords" stripe style="width: 100%">
                                <el-table-column prop="time" label="操作时间"></el-table-column>
                                <el-table-column prop="type" label="操作类型"></el-table-column>
                                <el-table-column prop="operator" label="操作人员"></el-table-column>
                                <el-table-column prop="content" label="操作内容"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="租户行政区域配置" name="tenants">
                <el-card>
                    <!-- 指标列表 -->
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <h3>租户行政区域配置</h3>
                            <el-table :data="indicatorData" stripe style="width: 100%">
                                <el-table-column prop="name" label="指标名称"></el-table-column>
                                <el-table-column prop="range" label="数据范围"></el-table-column>
                                <el-table-column label="操作">
                                    <template #default="scope">
                                        <el-button type="text" size="small"
                                            @click="handleEditIndicator(scope.row)">编辑</el-button>
                                        <el-button type="text" size="small" style="color: red;"
                                            @click="handleDeleteIndicator(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>

                    <!-- 操作记录 -->
                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="24">
                            <h3>操作记录</h3>
                            <el-table :data="operationRecords" stripe style="width: 100%">
                                <el-table-column prop="time" label="操作时间"></el-table-column>
                                <el-table-column prop="type" label="操作类型"></el-table-column>
                                <el-table-column prop="operator" label="操作人员"></el-table-column>
                                <el-table-column prop="content" label="操作内容"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script setup>
import { ref } from 'vue';
const activeName = ref('statistics');
// 数据定义
const indicatorData = ref([
    { id: 1, name: '用水量', range: '2024-01-01 至 2024-12-31' },
    { id: 2, name: '压力值', range: '2024-01-01 至 2024-12-31' }
]);

const operationRecords = ref([
    { time: '2024-01-15 14:30:00', type: '修改', operator: '张经理', content: '修改管网合格率为 95%' },
    { time: '2024-01-15 11:20:00', type: '添加', operator: '李工程师', content: '添加压力报警配置 AL002' }
]);

// 方法定义
function handleAddIndicator() {
    console.log('Adding new indicator');
}

function handleEditIndicator(row) {
    console.log('Editing indicator:', row);
}

function handleDeleteIndicator(row) {
    console.log('Deleting indicator:', row);
}
// 方法定义
function handleEdit(tier) {
    console.log(`Editing tier ${tier}`);
}
</script>

<style scoped>
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-tier {}

.operation-records {
    margin-top: 20px;
}
</style>